<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="static/bootstrap/dist/css/bootstrap.min.css">
    <script src="static/axios/axios.min.js"></script>
</head>
<body>
    <div class="container">
        <h1>用户列表</h1>
        <caption>用户基本信息</caption>
        <table class="table table-sm">
            <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Email</th>
                <th>Password</th>
                <th>Role</th>
                <th>Actions</th>
            </tr>
            </thead>
            <tbody id="users-table-body" class="text-muted">
            </tbody>
        </table>
    </div>
</body>

<script>
    let users_table_body = document.getElementById('users-table-body');


    axios.get('/getUsers').then(function (response) {
        let users = response.data.results;
        users.forEach(function (user) {

            let user_row = formatDataEl(user.id, user.username, user.email, user.password, user.role);
            users_table_body.innerHTML += user_row;
        });

    })

    function formatDataEl( id, username, email, password, role ) {
        return `
        <tr class="text-muted">
            <td>${id}</td>
            <td>${username}</td>
            <td>${email}</td>
            <td>${password}</td>
            <td>${role}</td>
            <td>
                <button class="btn btn-sm link-primary" onclick="editUser(${id})">Edit</button>
                <button class="btn btn-sm link-danger" onclick="deleteUser(${id})">Delete</button>
            </td>
        </tr>
        `
    }
</script>
</html>